<template>
  <!-- 岗位表单弹窗 -->
  <Modal :modelValue="modelValue" :title="title" @close="handleCloseDialog" @open="handleOpenDialog" width="500px"
    maxHeight="auto">
    <el-form ref="companyFormRef" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="名称" prop="company_name">
        <el-input v-model="form.company_name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="代码" prop="company_code">
        <el-input v-model="form.company_code" placeholder="请输入代码" />
      </el-form-item>
      <el-form-item label="所属城市" prop="area_code">
        <el-tree-select v-model="form.area_code" placeholder="选择所属城市" :data="areaData" filterable check-strictly
          @change="handleTreeChange"
          :props="{ children: 'children', label: 'name', value: 'ccode', hasChildren: 'has_children' }" />
      </el-form-item>
      <el-form-item label="统一信用代码" prop="unform_code">
        <el-input v-model="form.unform_code" placeholder="请输入统一信用代码" />
      </el-form-item>
      <el-form-item label="法人代表" prop="legal_person">
        <el-input v-model="form.legal_person" placeholder="请输入法人代表" />
      </el-form-item>
      <el-form-item label="联系人" prop="contact_name">
        <el-input v-model="form.contact_name" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contact_no">
        <el-input v-model="form.contact_no" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="联系邮箱" prop="emails">
        <el-input v-model="form.emails" placeholder="请输入联系邮箱" />
      </el-form-item>
      <el-form-item label="描述" prop="brief">
        <el-input type="textarea" v-model="form.brief" placeholder="请输入描述" :autosize="{ minRows: 2, maxRows: 4 }" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="modal-footer">
        <el-button type="primary" @click="handleSubmit" :loading="loading" :disabled="loading">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </Modal>
</template>

<script setup lang="ts">

import CompanyAPI, { CompanyVO, CompanyForm } from '@/api/company';
import AreaAPI, { AreaVO } from "@/api/area"
import { buildTree } from "@/utils";
// 定义接收的属性
interface Props {
  modelValue: boolean
  selectedItem?: CompanyVO
  title?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: '表单',
})

// 自定义事件
const emit = defineEmits<{
  submit: [formData: CompanyForm]
  close: []
}>()

const areaData = ref<AreaVO[]>()

const areaObjectData = ref({})

const companyFormRef = ref(ElForm)

const loading = ref(false)

const form = ref<CompanyForm>({})

const rules = reactive({
  company_name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  company_code: [{ required: true, message: "请输入代码", trigger: "blur" }],
  area_code: [{ required: true, message: "请选择所属城市", trigger: "change" }],
})

//获取表单数据
const getFormData = (companyId: number) => {
  // 调用接口获取岗位信息
  CompanyAPI.getFormData(companyId).then((res) => {
    if (res.status === 200) {
      Object.assign(form.value, res.data)
    }
  })
}


const getAreaTree = () => {
  const queryCondition: QueryCondition = {
    and: [{ field: 'level', op: '<', value: 3 }],
  }
  AreaAPI.query(queryCondition).then((res) => {
    if (res.status == 200) {
      areaData.value = buildTree(res.data, 'ccode', 'pcode')
      res.data.forEach(element => {
        areaObjectData[element.ccode] = element.name
      })
    }
  })
}

const handleTreeChange = (value) => {
  form.value.full_city = areaObjectData[value]
}

const handleOpenDialog = () => {

}

const handleCloseDialog = () => {
  resetForm()
  emit('close')
}

const submitClick = (data: any) => {
  resetForm()
  emit('submit', data)
}

const resetForm = () => {
  if (companyFormRef.value) {
    companyFormRef.value.resetFields()
    companyFormRef.value.clearValidate()
  }
  form.value = {}
}
const handleSubmit = () => {
  companyFormRef.value.validate((valid: any) => {
    if (valid) {
      if (form.value.company_id) {
        updateData()
      } else {
        saveData()
      }
    }
  })
}

const saveData = () => {
  loading.value = true
  CompanyAPI.add(form.value).then((res) => {
    if (res.status === 200) {
      ElMessage.success("新增成功")
      submitClick(res.data)
    }
  }).finally(() => {
    loading.value = false
  })
}
const updateData = () => {
  loading.value = true
  CompanyAPI.update(form.value).then((res) => {
    if (res.status === 200) {
      ElMessage.success("修改成功")
      submitClick(res.data)
    }
  }).finally(() => {
    loading.value = false
  })
}


//表单传递数据
watch(() => props.selectedItem, (newVal: any, oldVal) => {
  if (props.selectedItem && props.selectedItem.company_id) {
    getFormData(props.selectedItem.company_id)
  } else {
    form.value = Object.assign(newVal, {})
  }
  getAreaTree()
}, { immediate: true, deep: true })



</script>
